<script setup lang="ts">
import Index from "@/views/Index/index.vue";
import Nav from "@/components/Nav/nav.vue";
import Menu from "@/components/Menu/menu.vue";
import NavTabs from "@/components/Nav/nav-tabs.vue";
import { ref, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { remove_tab } from "../common/utils";

const router = useRouter();
const route = useRoute();
const store = useStore();
const editableTabs = ref(store.state.tabsList);
const mainBoxWidth = ref("calc(100% - 200px)");

const editableTabsValue = ref(
  store.state.tabsActiveName || store.state.tabsList[0].name
);
const route_title = ref(
  store.state.tabsActiveName == "" || store.state.tabsActiveName == "/index"
    ? "首页 / 概述"
    : store.state.tabsActiveName == "/users"
    ? "权限管理 / 角色管理"
    : store.state.tabsActiveName == "/client-users"
    ? "用户管理 / 用户列表"
    : store.state.tabsActiveName == "/order"
    ? "业务管理 / 订单管理"
    : store.state.tabsActiveName == "/goods"
    ? "业务管理 / 商品管理"
    : store.state.tabsActiveName == "/goods-accounts"
    ? "业务管理 / 商品账目"
    : store.state.tabsActiveName == "/picture"
    ? "图片管理"
    : ""
);
const page_type = ref(
  route.fullPath == "/login" || route.fullPath == "/" ? "login_out" : "login_in"
);
// 点击标签页改变路由
const changeRouter = (url: any) => {
  store.dispatch("handlerTabsActiveName", url);
};

watch(
  () => [
    route.fullPath,
    store.state.menuCollapse,
    store.state.tabsActiveName,
    store.state.tabsList,
  ],
  ([fullPathVal, menuCollapseVal, tabsActiveNameVal, tabsListVal]: any) => {
    mainBoxWidth.value = menuCollapseVal ? "1000%" : "calc(100% - 200px)";
    // 初始化选中对应标签
    editableTabsValue.value = tabsActiveNameVal;
    router.push(tabsActiveNameVal);
    editableTabs.value = tabsListVal;

    page_type.value =
      fullPathVal == "/login" || fullPathVal == "/" ? "login_out" : "login_in";

    // 页面页眉展示路由层级title
    route_title.value =
      fullPathVal == "" || fullPathVal == "/index"
        ? "首页 / 概述"
        : fullPathVal == "/users"
        ? "权限管理 / 角色管理"
        : fullPathVal == "/client-users"
        ? "用户管理 / 用户列表"
        : fullPathVal == "/order"
        ? "业务管理 / 订单管理"
        : fullPathVal == "/goods"
        ? "权限管理 / 商品管理"
        : fullPathVal == "/goods-accounts"
        ? "权限管理 / 商品账目"
        : fullPathVal == "/picture"
        ? "图片管理"
        : "";
  }
);

// console.log("######################");
// console.log(page_type.value);
// console.log(route.fullPath);
// console.log(typeof route.fullPath);
</script>

<template>
  <div class="app">
    <!-- 未登录 -->

    <section v-if="page_type == 'login_out'">
      <transition name="login-out">
        <router-view class="content-box"></router-view>
      </transition>
    </section>

    <!-- 已登录 -->
    <transition name="login-in">
      <section v-if="page_type == 'login_in'">
        <div class="nav">
          <Nav class="app-nav"></Nav>
        </div>

        <div class="content">
          <div class="menu">
            <Menu class="app-menu"></Menu>
          </div>
          <div
            class="main"
            :style="{ width: mainBoxWidth, transition: '0.5s' }"
          >
            <div class="tab-nav">{{ route_title }}</div>
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              class="demo-tabs"
              closable
              @tab-remove="remove_tab"
              @tab-change="changeRouter"
            >
              <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                :closable="item.closable"
              >
                <transition name="slide-left">
                  <router-view class="content-box"></router-view>
                </transition>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </section>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  .nav {
    width: 100%;
    height: 59px;

    .app-nav {
      width: 100%;
      height: 100%;
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;

    // box-shadow: 0 0 15px 5px #C4C4C46B;
    // border-radius: 5px;

    .menu {
      width: 200px;
      height: 100%;

      .app-menu {
        width: 100%;
        height: 100%;
      }
    }

    .main {
      // width: calc(100% - 200px);
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #fff;
      .tab-nav {
        width: 100%;
        height: 40px;
        background: #f3f4f6;
        display: flex;
        flex-direction: column;
        font-size: 13px;
        text-align: left;
        text-indent: 15px;
        line-height: 40px;
        color: #707070;
      }
    }
  }
}

/* 载入动画效果 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition-duration: 0.3s;
  transition-property: transform, opacity;
  // transition: transform opacity 0.3s;
}

.slide-left-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}
.slide-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-from {
  opacity: 1;
}
.slide-left-leave-to {
  opacity: 0;
}

.login-out-enter-active,
.login-in-enter-active {
  transition-duration: 1s;
  transition-property: opacity;
}

.login-out-enter-from,
.login-in-enter-from {
  opacity: 0;
}
.login-out-enter-to,
.login-in-enter-to {
  opacity: 1;
}
// .login-out-leave-from,
// .login-in-leave-from {
//   opacity: 1;
// }
// .login-out-leave-to,
// .login-in-leave-to {
//   opacity: 0;
// }
</style>
